	<!DOCTYPE html>
			<html lang="en">
				<head>
					<meta charset="utf-8" />
					<title>Swiper demo</title>
					<meta name="viewport"
						content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
					<!-- Link Swiper's CSS -->
					<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />

					<!-- Demo styles -->
					<style>
						html,
						body {
							position: relative;
							height: 100%;
						}

						body {
							background: #eee;
							font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
							font-size: 14px;
							color: #000;
							margin: 0;
							padding: 0;
						}

						.swiper {
							width: 100%;
							height: 100%;
						}

						.swiper-slide {
							text-align: center;
							font-size: 18px;
							background: #fff;

							/* Center slide text vertically */
							display: -webkit-box;
							display: -ms-flexbox;
							display: -webkit-flex;
							display: flex;
							-webkit-box-pack: center;
							-ms-flex-pack: center;
							-webkit-justify-content: center;
							justify-content: center;
							-webkit-box-align: center;
							-ms-flex-align: center;
							-webkit-align-items: center;
							align-items: center;
						}

						.swiper-slide {
							width: 80%;
						}

						.swiper-slide img {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}


						.main_bd_bd {
							display: flex;
							justify-content: space-between;
						}

						.main_bd {
							/* font-size: 1.1875rem; */
							text-align: left !important;
							margin-bottom: 0.625rem;
						}

						.main_bd span {
							color: #8d8d8d !important;
						}

						.main_bd_bd {
							/* font-size: 1.125rem; */
							color: #8d8d8d;
						}

						/* .swiper-slide:nth-child(2n) {
			        width: 60%;
			      }
			
			      .swiper-slide:nth-child(3n) {
			        width: 40%;
			      } */
					</style>
				</head>

				<body>
					<!-- Swiper -->
					<div class="swiper mySwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="main">
									<div class="main_hd">
										<img src="img/500577327@2x(1).png" alt="">
									</div>
									<div class="wenzi container">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="main">
									<div class="main_hd">
										<img src="img/500577327@2x(1).png" alt="">
									</div>
									<div class="wenzi container">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
									</div>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="main">
									<div class="main_hd">
										<img src="img/500577327@2x(1).png" alt="">
									</div>
									<div class="wenzi container">
									<div class="main_bd">赚钱又赚人气的声音课 <span>共5节</span></div>
									<div class="main_bd_bd">
										<div class="main_bd_bd_left">
											来自千图网平台
										</div>
										<div class="main_bd_bd_right">
											1.2万次播放
										</div>
									</div>
									</div>
								</div>
							</div>


							<div class="swiper-pagination"></div>
						</div>

						<!-- Swiper JS -->
						<script src="./swiper/swiper-bundle.min.js"></script>

						<!-- Initialize Swiper -->
						<script>
							var swiper = new Swiper(".mySwiper", {
								slidesPerView: "auto",
								spaceBetween: 30,
								pagination: {
									el: ".swiper-pagination",
									clickable: true,
								},
							});
						</script>
				</body>
			</html>
